import { useState, useCallback } from 'react';

import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import Grid from '@mui/material/Grid';
import Chip from '@mui/material/Chip';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import OutlinedInput from '@mui/material/OutlinedInput';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';

import { DashboardContent } from 'src/layouts/dashboard';
import { Iconify } from 'src/components/iconify';

// ----------------------------------------------------------------------

/**
 * 会社情報検索ビュー：検索フォームを実装
 */
export function CompanyView() {
    // Accordion 展開状態 - 各Accordionを独立して制御
    const [expandedAccordions, setExpandedAccordions] = useState({
        freeKeyword: true,
        basicInfo: true,
        detailInfo: true,
        dateInfo: true,
        financialInfo: true,
        customFields: true,
    });

    const handleAccordionChange = (panel: keyof typeof expandedAccordions) => (_event: React.SyntheticEvent, isExpanded: boolean) => {
        setExpandedAccordions(prev => ({
            ...prev,
            [panel]: isExpanded,
        }));
    };

    // フリーワード検索
    const [freeKeyword, setFreeKeyword] = useState('');

    // 基本情報
    const [companyNumber, setCompanyNumber] = useState('');
    const [companyNumberCondition, setCompanyNumberCondition] = useState('normal');
    const [companyCode, setCompanyCode] = useState('');
    const [companyCodeCondition, setCompanyCodeCondition] = useState('normal');
    const [companyName, setCompanyName] = useState('');
    const [companyNameCondition, setCompanyNameCondition] = useState('normal');
    const [companyNameKana, setCompanyNameKana] = useState('');
    const [companyNameKanaCondition, setCompanyNameKanaCondition] = useState('normal');
    const [capital, setCapital] = useState('');
    const [capitalCondition, setCapitalCondition] = useState('normal');
    const [mainPhone, setMainPhone] = useState('');
    const [mainPhoneCondition, setMainPhoneCondition] = useState('normal');
    const [address, setAddress] = useState('');
    const [addressCondition, setAddressCondition] = useState('normal');
    const [memo, setMemo] = useState('');
    const [memoCondition, setMemoCondition] = useState('normal');

    // カテゴリー
    const [categories, setCategories] = useState<string[]>([]);
    const [categoryCondition, setCategoryCondition] = useState('or');

    // 担当
    const [assignedDepartment, setAssignedDepartment] = useState<string[]>([]);
    const [assignedDepartmentCondition, setAssignedDepartmentCondition] = useState('or');
    const [recruitmentPerson, setRecruitmentPerson] = useState<string[]>([]);
    const [recruitmentPersonCondition, setRecruitmentPersonCondition] = useState('or');

    // ステータス
    const [statusList, setStatusList] = useState<string[]>([]);
    const [statusCondition, setStatusCondition] = useState('or');

    // 登録日
    const [registrationDateFrom, setRegistrationDateFrom] = useState('');
    const [registrationDateTo, setRegistrationDateTo] = useState('');

    // 更新日
    const [updateDateFrom, setUpdateDateFrom] = useState('');
    const [updateDateTo, setUpdateDateTo] = useState('');

    // 最終の取引日
    const [lastTransactionDateFrom, setLastTransactionDateFrom] = useState('');
    const [lastTransactionDateTo, setLastTransactionDateTo] = useState('');

    // 財務情報
    const [revenueFrom, setRevenueFrom] = useState('');
    const [revenueTo, setRevenueTo] = useState('');
    const [operatingProfitFrom, setOperatingProfitFrom] = useState('');
    const [operatingProfitTo, setOperatingProfitTo] = useState('');
    const [netIncomeFrom, setNetIncomeFrom] = useState('');
    const [netIncomeTo, setNetIncomeTo] = useState('');
    const [totalAssetsFrom, setTotalAssetsFrom] = useState('');
    const [totalAssetsTo, setTotalAssetsTo] = useState('');
    const [listedStatus, setListedStatus] = useState('');
    const [stockCode, setStockCode] = useState('');

    // 詳細情報
    const [businessOverview, setBusinessOverview] = useState('');
    const [businessOverviewCondition, setBusinessOverviewCondition] = useState('normal');
    const [organizationStructure, setOrganizationStructure] = useState('');
    const [organizationStructureCondition, setOrganizationStructureCondition] = useState('normal');
    const [selectionProcess, setSelectionProcess] = useState('');
    const [selectionProcessCondition, setSelectionProcessCondition] = useState('normal');
    const [pastAdoptionStatus, setPastAdoptionStatus] = useState('');
    const [pastAdoptionStatusCondition, setPastAdoptionStatusCondition] = useState('normal');
    const [interviewPreference, setInterviewPreference] = useState('');
    const [interviewPreferenceCondition, setInterviewPreferenceCondition] = useState('normal');
    const [companySales, setCompanySales] = useState('');
    const [companySalesCondition, setCompanySalesCondition] = useState('normal');
    const [futureDevelopment, setFutureDevelopment] = useState('');
    const [futureDevelopmentCondition, setFutureDevelopmentCondition] = useState('normal');
    const [merger, setMerger] = useState('');
    const [mergerCondition, setMergerCondition] = useState('normal');
    const [materialRateMin, setMaterialRateMin] = useState('');
    const [materialRateMax, setMaterialRateMax] = useState('');
    const [contractConditions, setContractConditions] = useState('');
    const [contractConditionsCondition, setContractConditionsCondition] = useState('normal');
    const [workplaceEnvironment, setWorkplaceEnvironment] = useState('');
    const [workplaceEnvironmentCondition, setWorkplaceEnvironmentCondition] = useState('normal');
    const [shareholders, setShareholders] = useState('');
    const [shareholdersCondition, setShareholdersCondition] = useState('normal');
    const [relatedCompanies, setRelatedCompanies] = useState('');
    const [relatedCompaniesCondition, setRelatedCompaniesCondition] = useState('normal');
    const [otherBusinessLocations, setOtherBusinessLocations] = useState('');
    const [otherBusinessLocationsCondition, setOtherBusinessLocationsCondition] = useState('normal');
    const [transactionBank, setTransactionBank] = useState('');
    const [transactionBankCondition, setTransactionBankCondition] = useState('normal');
    const [contractDocumentCountMin, setContractDocumentCountMin] = useState('');
    const [contractDocumentCountMax, setContractDocumentCountMax] = useState('');

    // 自由項目
    const [customFields, setCustomFields] = useState<Array<{ key: string; value: string }>>([]);

    const handleSearch = useCallback(() => {
        console.log('検索実行');
        // TODO: 検索処理を実装
    }, []);

    const handleReset = useCallback(() => {
        setFreeKeyword('');
        setCompanyNumber('');
        setCompanyNumberCondition('normal');
        setCompanyCode('');
        setCompanyCodeCondition('normal');
        setCompanyName('');
        setCompanyNameCondition('normal');
        setCompanyNameKana('');
        setCompanyNameKanaCondition('normal');
        setCapital('');
        setCapitalCondition('normal');
        setMainPhone('');
        setMainPhoneCondition('normal');
        setAddress('');
        setAddressCondition('normal');
        setMemo('');
        setMemoCondition('normal');
        setCategories([]);
        setCategoryCondition('or');
        setAssignedDepartment([]);
        setAssignedDepartmentCondition('or');
        setRecruitmentPerson([]);
        setRecruitmentPersonCondition('or');
        setStatusList([]);
        setStatusCondition('or');
        setRegistrationDateFrom('');
        setRegistrationDateTo('');
        setUpdateDateFrom('');
        setUpdateDateTo('');
        setLastTransactionDateFrom('');
        setLastTransactionDateTo('');
        setRevenueFrom('');
        setRevenueTo('');
        setOperatingProfitFrom('');
        setOperatingProfitTo('');
        setNetIncomeFrom('');
        setNetIncomeTo('');
        setTotalAssetsFrom('');
        setTotalAssetsTo('');
        setListedStatus('');
        setStockCode('');
        setBusinessOverview('');
        setBusinessOverviewCondition('normal');
        setOrganizationStructure('');
        setOrganizationStructureCondition('normal');
        setSelectionProcess('');
        setSelectionProcessCondition('normal');
        setPastAdoptionStatus('');
        setPastAdoptionStatusCondition('normal');
        setInterviewPreference('');
        setInterviewPreferenceCondition('normal');
        setCompanySales('');
        setCompanySalesCondition('normal');
        setFutureDevelopment('');
        setFutureDevelopmentCondition('normal');
        setMerger('');
        setMergerCondition('normal');
        setMaterialRateMin('');
        setMaterialRateMax('');
        setContractConditions('');
        setContractConditionsCondition('normal');
        setWorkplaceEnvironment('');
        setWorkplaceEnvironmentCondition('normal');
        setShareholders('');
        setShareholdersCondition('normal');
        setRelatedCompanies('');
        setRelatedCompaniesCondition('normal');
        setOtherBusinessLocations('');
        setOtherBusinessLocationsCondition('normal');
        setTransactionBank('');
        setTransactionBankCondition('normal');
        setContractDocumentCountMin('');
        setContractDocumentCountMax('');
        setCustomFields([]);
    }, []);

    const renderConditionSelect = (
        value: string,
        onChange: (value: string) => void,
        type: 'simple' | 'full' = 'full'
    ) => {
        const simpleOptions = [
            { value: 'normal', label: '通常' },
            { value: 'or', label: 'OR' },
            { value: 'not-match', label: '不一致' },
        ];

        const fullOptions = [
            { value: 'normal', label: '通常' },
            { value: 'and', label: 'AND' },
            { value: 'or', label: 'OR' },
            { value: 'not-match', label: '不一致' },
            { value: 'not-entered', label: '未入力' },
            { value: 'entered', label: '入力済' },
        ];

        const options = type === 'simple' ? simpleOptions : fullOptions;

        return (
            <ToggleButtonGroup
                value={value}
                exclusive
                onChange={(_, newValue) => {
                    if (newValue !== null) {
                        onChange(newValue);
                    }
                }}
                size="small"
                sx={{
                    flexShrink: 0,
                    flexWrap: 'wrap',
                    gap: 0.5,
                    '& .MuiToggleButtonGroup-grouped': {
                        margin: 0,
                        border: '1px solid',
                        borderColor: 'divider',
                        '&:not(:first-of-type)': {
                            borderRadius: 1,
                            borderLeft: '1px solid',
                            borderColor: 'divider',
                        },
                        '&:first-of-type': {
                            borderRadius: 1,
                        },
                    },
                    '& .MuiToggleButton-root': {
                        px: 1.5,
                        py: 0.5,
                        fontSize: '0.75rem',
                        fontWeight: 500,
                        textTransform: 'none',
                        color: 'text.secondary',
                        '&.Mui-selected': {
                            bgcolor: 'primary.main',
                            color: 'primary.contrastText',
                            fontWeight: 600,
                            '&:hover': {
                                bgcolor: 'primary.dark',
                            },
                        },
                        '&:hover': {
                            bgcolor: 'action.hover',
                        },
                    },
                }}
            >
                {options.map((option) => (
                    <ToggleButton key={option.value} value={option.value}>
                        {option.label}
                    </ToggleButton>
                ))}
            </ToggleButtonGroup>
        );
    };

    const renderMultiSelectCondition = (
        value: string,
        onChange: (value: string) => void
    ) => {
        const options = [
            { value: 'or', label: 'OR' },
            { value: 'not-match', label: '不一致' },
            { value: 'not-entered', label: '未入力' },
            { value: 'entered', label: '入力済' },
        ];

        return (
            <ToggleButtonGroup
                value={value}
                exclusive
                onChange={(_, newValue) => {
                    if (newValue !== null) {
                        onChange(newValue);
                    }
                }}
                size="small"
                sx={{
                    flexShrink: 0,
                    flexWrap: 'wrap',
                    gap: 0.5,
                    '& .MuiToggleButtonGroup-grouped': {
                        margin: 0,
                        border: '1px solid',
                        borderColor: 'divider',
                        '&:not(:first-of-type)': {
                            borderRadius: 1,
                            borderLeft: '1px solid',
                            borderColor: 'divider',
                        },
                        '&:first-of-type': {
                            borderRadius: 1,
                        },
                    },
                    '& .MuiToggleButton-root': {
                        px: 1.5,
                        py: 0.5,
                        fontSize: '0.75rem',
                        fontWeight: 500,
                        textTransform: 'none',
                        color: 'text.secondary',
                        '&.Mui-selected': {
                            bgcolor: 'primary.main',
                            color: 'primary.contrastText',
                            fontWeight: 600,
                            '&:hover': {
                                bgcolor: 'primary.dark',
                            },
                        },
                        '&:hover': {
                            bgcolor: 'action.hover',
                        },
                    },
                }}
            >
                {options.map((option) => (
                    <ToggleButton key={option.value} value={option.value}>
                        {option.label}
                    </ToggleButton>
                ))}
            </ToggleButtonGroup>
        );
    };

    return (
        <DashboardContent maxWidth="xl">
            {/* ヘッダー */}
            <Box sx={{ mb: 1.5 }}>
                <Box display="flex" alignItems="center" gap={2} sx={{ mb: 2 }}>
                    <div style={{ height: 25, width: 5, backgroundColor: '#0543A5', borderRadius: 3 }}></div>
                    <Typography variant="h4" sx={{ fontWeight: 700 }}>
                        会社情報検索
                    </Typography>
                </Box>
                <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
                    検索や集計に使用される項目です
                </Typography>
            </Box>

            {/* メインフォーム */}
            {/* 基本情報セクション */}
            <Box >
                {/* その他設定項目 */}
                <Box sx={{ borderTop: '2px solid', borderColor: 'divider', mt: 1.5 }}>
                    <Box sx={{ bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, borderBottom: '1px solid', borderColor: 'divider' }}>
                        <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                            その他設定項目
                        </Typography>
                    </Box>

                    {/* 会社番号 */}
                    <Box sx={{ display: 'flex', borderBottom: '1px solid', borderColor: 'divider' }}>
                        <Box sx={{ width: 160, bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', borderRight: '1px solid', borderColor: 'divider' }}>
                            <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                                会社番号
                            </Typography>
                        </Box>
                        <Box sx={{ flex: 1, px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', gap: 1.5 }}>
                            <TextField
                                size="small"
                                fullWidth
                                placeholder="会社番号を入力"
                                value={companyNumber}
                                onChange={(e) => setCompanyNumber(e.target.value)}
                                sx={{
                                    bgcolor: 'background.paper',
                                    '& .MuiOutlinedInput-root': {
                                        height: 32,
                                        fontSize: '0.875rem'
                                    }
                                }}
                            />
                            {renderConditionSelect(companyNumberCondition, setCompanyNumberCondition, 'simple')}
                        </Box>
                    </Box>

                    {/* 会社コード */}
                    <Box sx={{ display: 'flex', borderBottom: '1px solid', borderColor: 'divider' }}>
                        <Box sx={{ width: 160, bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', borderRight: '1px solid', borderColor: 'divider' }}>
                            <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                                会社コード
                            </Typography>
                        </Box>
                        <Box sx={{ flex: 1, px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', gap: 1.5 }}>
                            <TextField
                                size="small"
                                fullWidth
                                placeholder="会社コードを入力"
                                value={companyCode}
                                onChange={(e) => setCompanyCode(e.target.value)}
                                sx={{
                                    bgcolor: 'background.paper',
                                    '& .MuiOutlinedInput-root': {
                                        height: 32,
                                        fontSize: '0.875rem'
                                    }
                                }}
                            />
                            {renderConditionSelect(companyCodeCondition, setCompanyCodeCondition)}
                        </Box>
                    </Box>

                    {/* 会社名 */}
                    <Box sx={{ display: 'flex', borderBottom: '1px solid', borderColor: 'divider' }}>
                        <Box sx={{ width: 160, bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', borderRight: '1px solid', borderColor: 'divider' }}>
                            <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                                会社名
                            </Typography>
                        </Box>
                        <Box sx={{ flex: 1, px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', gap: 1.5 }}>
                            <TextField
                                size="small"
                                fullWidth
                                placeholder="会社名を入力"
                                value={companyName}
                                onChange={(e) => setCompanyName(e.target.value)}
                                sx={{
                                    bgcolor: 'background.paper',
                                    '& .MuiOutlinedInput-root': {
                                        height: 32,
                                        fontSize: '0.875rem'
                                    }
                                }}
                            />
                            {renderConditionSelect(companyNameCondition, setCompanyNameCondition)}
                        </Box>
                    </Box>

                    {/* かな */}
                    <Box sx={{ display: 'flex', borderBottom: '1px solid', borderColor: 'divider' }}>
                        <Box sx={{ width: 160, bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', borderRight: '1px solid', borderColor: 'divider' }}>
                            <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                                かな
                            </Typography>
                        </Box>
                        <Box sx={{ flex: 1, px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', gap: 1.5 }}>
                            <TextField
                                size="small"
                                fullWidth
                                placeholder="かなを入力"
                                value={companyNameKana}
                                onChange={(e) => setCompanyNameKana(e.target.value)}
                                sx={{
                                    bgcolor: 'background.paper',
                                    '& .MuiOutlinedInput-root': {
                                        height: 32,
                                        fontSize: '0.875rem'
                                    }
                                }}
                            />
                            {renderConditionSelect(companyNameKanaCondition, setCompanyNameKanaCondition)}
                        </Box>
                    </Box>

                    {/* 資本金 */}
                    <Box sx={{ display: 'flex', borderBottom: '1px solid', borderColor: 'divider' }}>
                        <Box sx={{ width: 160, bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', borderRight: '1px solid', borderColor: 'divider' }}>
                            <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                                資本金
                            </Typography>
                        </Box>
                        <Box sx={{ flex: 1, px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', gap: 1.5 }}>
                            <TextField
                                size="small"
                                fullWidth
                                placeholder="資本金を入力"
                                value={capital}
                                onChange={(e) => setCapital(e.target.value)}
                                sx={{
                                    bgcolor: 'background.paper',
                                    '& .MuiOutlinedInput-root': {
                                        height: 32,
                                        fontSize: '0.875rem'
                                    }
                                }}
                            />
                            {renderConditionSelect(capitalCondition, setCapitalCondition)}
                        </Box>
                    </Box>

                    {/* カテゴリー */}
                    <Box sx={{ display: 'flex', borderBottom: '1px solid', borderColor: 'divider' }}>
                        <Box sx={{ width: 160, bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', borderRight: '1px solid', borderColor: 'divider' }}>
                            <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                                カテゴリー
                            </Typography>
                        </Box>
                        <Box sx={{ flex: 1, px: 1.5, py: 0.75, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
                            <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.75rem' }}>
                                Ctrl + クリック で複数選択可
                            </Typography>
                            <Box sx={{ mb: 0.5 }}>
                                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.75rem' }}>
                                    全体
                                </Typography>
                                <Typography variant="body2" sx={{ fontSize: '0.75rem' }}>会社カテゴリー</Typography>
                            </Box>
                            <Stack direction="row" spacing={2} alignItems="center">
                                <FormControl size="small" fullWidth>
                                    <Select
                                        multiple
                                        value={categories}
                                        onChange={(e) => setCategories(e.target.value as string[])}
                                        input={<OutlinedInput />}
                                        sx={{
                                            '& .MuiOutlinedInput-root': {
                                                minHeight: 32,
                                                fontSize: '0.875rem'
                                            }
                                        }}
                                        renderValue={(selected) => (
                                            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                                                {selected.map((value: string) => (
                                                    <Chip
                                                        key={value}
                                                        label={value}
                                                        size="small"
                                                        color="primary"
                                                        variant="outlined"
                                                    />
                                                ))}
                                            </Box>
                                        )}
                                    >
                                        <MenuItem value="IT・情報通信">IT・情報通信</MenuItem>
                                        <MenuItem value="製造業">製造業</MenuItem>
                                        <MenuItem value="建設業">建設業</MenuItem>
                                        <MenuItem value="小売業">小売業</MenuItem>
                                        <MenuItem value="サービス業">サービス業</MenuItem>
                                    </Select>
                                </FormControl>
                                {renderMultiSelectCondition(categoryCondition, setCategoryCondition)}
                            </Stack>
                        </Box>
                    </Box>

                    {/* 代表電話 */}
                    <Box sx={{ display: 'flex', borderBottom: '1px solid', borderColor: 'divider' }}>
                        <Box sx={{ width: 160, bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', borderRight: '1px solid', borderColor: 'divider' }}>
                            <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                                代表電話
                            </Typography>
                        </Box>
                        <Box sx={{ flex: 1, px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', gap: 1.5 }}>
                            <TextField
                                size="small"
                                fullWidth
                                placeholder="電話番号を入力"
                                value={mainPhone}
                                onChange={(e) => setMainPhone(e.target.value)}
                                sx={{
                                    bgcolor: 'background.paper',
                                    '& .MuiOutlinedInput-root': {
                                        height: 32,
                                        fontSize: '0.875rem'
                                    }
                                }}
                            />
                            {renderConditionSelect(mainPhoneCondition, setMainPhoneCondition)}
                        </Box>
                    </Box>

                    {/* 住所 */}
                    <Box sx={{ display: 'flex', borderBottom: '1px solid', borderColor: 'divider' }}>
                        <Box sx={{ width: 160, bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', borderRight: '1px solid', borderColor: 'divider' }}>
                            <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                                住所
                            </Typography>
                        </Box>
                        <Box sx={{ flex: 1, px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', gap: 1.5 }}>
                            <TextField
                                size="small"
                                fullWidth
                                placeholder="住所を入力"
                                value={address}
                                onChange={(e) => setAddress(e.target.value)}
                                sx={{
                                    bgcolor: 'background.paper',
                                    '& .MuiOutlinedInput-root': {
                                        height: 32,
                                        fontSize: '0.875rem'
                                    }
                                }}
                            />
                            {renderConditionSelect(addressCondition, setAddressCondition)}
                        </Box>
                    </Box>

                    {/* 担当 */}
                    <Box sx={{ display: 'flex', borderBottom: '1px solid', borderColor: 'divider' }}>
                        <Box sx={{ width: 160, bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, display: 'flex', alignItems: 'flex-start', borderRight: '1px solid', borderColor: 'divider' }}>
                            <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                                担当
                            </Typography>
                        </Box>
                        <Box sx={{ flex: 1, px: 1.5, py: 0.75, display: 'flex', flexDirection: 'column', gap: 0.75 }}>
                            <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.75rem' }}>
                                Ctrl + クリック で複数選択可
                            </Typography>

                            {/* 配属部署 */}
                            <Box>
                                <Typography variant="body2" sx={{ mb: 0.5, fontSize: '0.8rem' }}>
                                    配属部署
                                </Typography>
                                <Stack direction="row" spacing={1.5} alignItems="center">
                                    <FormControl size="small" fullWidth>
                                        <Select
                                            multiple
                                            value={assignedDepartment}
                                            onChange={(e) => setAssignedDepartment(e.target.value as string[])}
                                            input={<OutlinedInput />}
                                            displayEmpty
                                            sx={{
                                                '& .MuiOutlinedInput-root': {
                                                    minHeight: 32,
                                                    fontSize: '0.875rem'
                                                }
                                            }}
                                        >
                                            <MenuItem value="営業部">営業部</MenuItem>
                                            <MenuItem value="技術部">技術部</MenuItem>
                                            <MenuItem value="管理部">管理部</MenuItem>
                                        </Select>
                                    </FormControl>
                                    {renderMultiSelectCondition(
                                        assignedDepartmentCondition,
                                        setAssignedDepartmentCondition
                                    )}
                                </Stack>
                            </Box>

                            {/* 採用担当 */}
                            <Box>
                                <Typography variant="body2" sx={{ mb: 1, color: 'text.secondary', fontSize: '0.75rem' }}>
                                    Ctrl + クリック で複数選択可
                                </Typography>
                                <Stack direction="row" spacing={2} alignItems="center">
                                    <FormControl size="small" fullWidth>
                                        <Select
                                            multiple
                                            value={recruitmentPerson}
                                            onChange={(e) => setRecruitmentPerson(e.target.value as string[])}
                                            input={<OutlinedInput />}
                                            displayEmpty
                                            sx={{
                                                '& .MuiOutlinedInput-root': {
                                                    minHeight: 32,
                                                    fontSize: '0.875rem'
                                                }
                                            }}
                                        >
                                            <MenuItem value="アクロリーチ 中村洋平">アクロリーチ 中村洋平</MenuItem>
                                            <MenuItem value="採用担当">採用担当</MenuItem>
                                        </Select>
                                    </FormControl>
                                    {renderMultiSelectCondition(
                                        recruitmentPersonCondition,
                                        setRecruitmentPersonCondition
                                    )}
                                </Stack>
                            </Box>
                        </Box>
                    </Box>

                    {/* ステータス */}
                    <Box sx={{ display: 'flex', borderBottom: '1px solid', borderColor: 'divider' }}>
                        <Box sx={{ width: 160, bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', borderRight: '1px solid', borderColor: 'divider' }}>
                            <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                                ステータス
                            </Typography>
                        </Box>
                        <Box sx={{ flex: 1, px: 1.5, py: 0.75, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
                            <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.75rem' }}>
                                Ctrl + クリック で複数選択可
                            </Typography>
                            <Stack direction="row" spacing={2} alignItems="center">
                                <FormControl size="small" fullWidth>
                                    <Select
                                        multiple
                                        value={statusList}
                                        onChange={(e) => setStatusList(e.target.value as string[])}
                                        input={<OutlinedInput />}
                                        sx={{
                                            '& .MuiOutlinedInput-root': {
                                                minHeight: 32,
                                                fontSize: '0.875rem'
                                            }
                                        }}
                                        renderValue={(selected) => (
                                            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                                                {selected.map((value: string) => (
                                                    <Chip
                                                        key={value}
                                                        label={value}
                                                        size="small"
                                                        color="primary"
                                                        variant="outlined"
                                                    />
                                                ))}
                                            </Box>
                                        )}
                                    >
                                        <MenuItem value="全体">全体</MenuItem>
                                        <MenuItem value="アクティブ">アクティブ</MenuItem>
                                        <MenuItem value="ペンディング">ペンディング</MenuItem>
                                        <MenuItem value="デッド">デッド</MenuItem>
                                    </Select>
                                </FormControl>
                                {renderMultiSelectCondition(statusCondition, setStatusCondition)}
                            </Stack>
                        </Box>
                    </Box>

                    {/* メモ */}
                    <Box sx={{ display: 'flex', borderBottom: '1px solid', borderColor: 'divider' }}>
                        <Box sx={{ width: 160, bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, display: 'flex', alignItems: 'flex-start', borderRight: '1px solid', borderColor: 'divider' }}>
                            <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                                メモ
                            </Typography>
                        </Box>
                        <Box sx={{ flex: 1, px: 1.5, py: 0.75, display: 'flex', alignItems: 'flex-start', gap: 1.5 }}>
                            <TextField
                                size="small"
                                fullWidth
                                multiline
                                rows={2}
                                placeholder="メモを入力"
                                value={memo}
                                onChange={(e) => setMemo(e.target.value)}
                                sx={{
                                    bgcolor: 'background.paper',
                                    '& .MuiOutlinedInput-root': {
                                        fontSize: '0.875rem'
                                    }
                                }}
                            />
                            {renderConditionSelect(memoCondition, setMemoCondition)}
                        </Box>
                    </Box>
                </Box>
            </Box>

            {/* アクションボタン */}
            <Box
                sx={{
                    display: 'flex',
                    gap: 1.5,
                    justifyContent: 'flex-end',
                    py: 2,
                    mt: 2,
                }}
            >
                <Button
                    variant="outlined"
                    size="small"
                    onClick={handleReset}
                    sx={{ minWidth: 100, px: 3 }}
                >
                    キャンセル
                </Button>
                <Button
                    variant="contained"
                    size="small"
                    onClick={handleSearch}
                    sx={{ minWidth: 100, px: 3 }}
                >
                    保存
                </Button>
            </Box>
        </DashboardContent>
    );
}
